<template>
  <div class="mall_payment container mall-order">
    <uni-nav-bar dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF" status-bar left-icon="left"
      title="订单详情" @clickLeft="back" />
    <!-- 头部地址栏 -->
    <div v-if="addressRadio" class="mall_payment-block mall_payment-top" @click="show_address">
      <div class="mall_payment-top-left">
        <div class="mall_payment-top-left-address">
          {{ addressRadio.address }}
        </div>
        <div>
          <span v-if="addressRadio.status === 1">[默认]</span>
          {{ addressRadio.name }} {{ addressRadio.tel }}
        </div>
      </div>
      <div class="mall_payment-top-left-icon">
        <u-icon name="arrow-right" />
      </div>
    </div>
    <div v-else class="flex-between-center mall_payment-block mall_payment-address" @click="show_address">
      <div class="flex-between-center">
        <span class="mall-address-none van-ellipsis">收货地址</span>
        <u-icon name="arrow-right" class="mall-right-icon" />
      </div>
      <div class="van-ellipsis">
        请选择收货地址
      </div>
    </div>
    <!-- 商品信息栏 -->
    <div class="mall_payment-block flex-between-center mall_payment-commodity div-sizing">
      <div class="mall_payment-commodity-img">
        <img :src="pay_index.logo" class="img-s-h">
      </div>
      <div class="flex-between-center mall_payment-commodity-title">
        <div class="mall_payment-commodity-describe van-multi-ellipsis--l2">
          {{ pay_index.goods_name }}
        </div>
        <div class="mall-right">
          <span>x1</span>
          <u-icon name="arrow-right" class="mall-right-icon" />
        </div>
        <!-- <div class="mall-goods-price">
          <span v-for="item in spec" :key="item" style="margin-right:2rpx;">{{ item }}</span>
        </div> -->
      </div>
      <div class="flex-between-center mall_payment-commodity-totalprice">
        <span>￥{{ pay_index.price }}</span>
      </div>
    </div>
    <!-- 运费 -->
    <div class="flex-between-center mall_payment-freight div-sizing">
      <span>
        运费
      </span>
      <span v-if="pay_index.postage_money != 0">
        {{ pay_index.postage_money }}
      </span>
      <span v-else>
        免运费
      </span>
    </div>
    <!-- 购买按钮 -->
    <div class="vant-btn div-sizing">
      <div class="flex-between-center van-btn-left">
        <span>待支付：</span>
        <span class="mall-price">￥{{ pay_index.total_price }}</span>
      </div>
      <u-button size="success" @click="get_create_order">
        立即购买
      </u-button>
    </div>
    <!-- 输入购买密码弹出层 -->
    <view class="code_dialog u-flex u-ali-center" v-if="password_show">
      <view class="code_dialog_box u-flex u-ju-center u-ali-center">
        <view class="" style="text-align: center;">
          请输入交易密码
        </view>
        <view class="">
          <u-code-input v-model="password" :maxlength="6"></u-code-input>
        </view>
        <button @click="onInput()">确认</button>
      </view>
    </view>
  </div>
</template>
<script>
  import {
    getGoodsConfirm,
    putGoodsOrder,
    putOrderPay
  } from '@/api/index.js'
  import md5 from '../../utils/md5.js'
  export default {
    data() {
      return {
        commodity_id: 0, // 商品ID
        commodity_num: 1, // 数量
        addressRadio: null, // 选中的地址 id 名称...
        password_show: false, // 密码弹出层
        order_id: '', // 创建订单返回的订单id
        pay_index: {}, // 商品信息
        password: '',
        showKeyboard: true // 输入框聚焦弹出数字键盘
      }
    },
    onLoad(opt) {
      this.commodity_id = opt.id
    },
    onShow() {
      this.get_pay_index()
    },
    methods: {
      back() {
        uni.navigateBack()
      },
      //  支付页面渲染
      get_pay_index() {
        const vm = this
        getGoodsConfirm({
          id: vm.commodity_id,
          num: vm.commodity_num,
          address_id: 1 // 从地址管理获取默认ID
        }).then(res => {
          if (res.code == 1) {
            const address = this.$ui.getStorage('addList')
            if (address) {
              console.log(address);
              vm.addressRadio = address
            } else if (res.adress && JSON.stringify(res.adress) !== '[]') {
              res.adress.address = res.adress.address_detail + res.adress.address_all
              vm.addressRadio = res.adress
            }
            const pay_index = res.data
            // pay_index.all_money = (parseFloat(pay_index.all_money).toFixed(4))
            // pay_index.postage = (parseFloat(pay_index.postage).toFixed(4))
            // pay_index.price = (parseFloat(pay_index.price).toFixed(4))
            vm.pay_index = pay_index
          }
        })
      },
      // 跳转到选择地址
      show_address() {
        this.$ui.push('/pages/mine/address/index?type=change')
      },
      // 关闭输入密码弹出层
      cancel() {
        // 关闭弹出层并清空密码
        this.password_show = false
        this.password = ''
        this.$ui.toast('取消支付')
        this.$router.go(-1)
      },
      // 立即购买按钮 创建订单
      get_create_order() {
        const vm = this
        if (!vm.addressRadio) {
          this.$ui.toast('请选择收货地址')
          return
        }
        putGoodsOrder({
          goods_id: vm.commodity_id,
          address_id: vm.addressRadio.id || vm.addressRadio.address_id,
          num: vm.commodity_num
          // specification: vm.spec.toString()
        }).then(res => {
          if (res.code === 1) {
            vm.order_id = res.data // 订单ID
            vm.password_show = true
          } else {
            vm.$ui.toast(res.msg)
          }
        })
      },
      // 键盘输入
      onInput() {
        var vm = this
        if (vm.password.length === 6) {
          const password = md5.hex_md5(vm.password)
          putOrderPay({
            id: vm.order_id,
            password: password
          }).then(res => {
            if (res.code === 1) {
              vm.password_show = false
              vm.$ui.toast(res.msg)
              uni.navigateBack()
            } else {
              vm.$ui.toast(res.msg)
            }
            this.password = ''
          })
        }
      },
      // 键盘删除
      onDelete() {
        this.password = this.password.slice(0, this.password.length - 1)
      }
    }
  }
</script>

<style lang="less" scoped>
  .mall_payment {
    width: 100%;
    height: 100vh;
    color: #000000;
    background: #f8f8f8;

    // 地址选择
    .address_radio {
      width: 80%;
      height: 2rem;
      padding: 0.4rem;
      margin-top: 0.5rem;

      .van-radio {
        padding: 0.6rem;
        border-bottom: 1rpx solid #f6f6f6;
      }
    }

    // 公用块
    .mall_payment-block {
      border-radius: 10rpx;
      background: #ffffff;
      margin: 0 20rpx;
      margin-top: 20rpx;
      padding: 0.4rem;
    }

    // 无地址
    .mall_payment-address {
      height: 150rpx;
      background: #ffffff;
      padding: 0 24rpx;
      margin: 24rpx 20rpx;
      justify-content: center;
      flex-direction: column;

      div {
        width: 100%;
      }

      .mall-address-none {
        margin-bottom: 8rpx;
        font-weight: bold;
      }

      .mall-right-icon {
        font-size: 30rpx;
        color: #989898;
      }
    }

    // 地址选择
    .mall_payment-top {
      display: flex;

      .mall_payment-top-left {
        width: 80%;
        height: 50%;

        .mall_payment-top-left-address {
          font-size: 0.4rem;
          margin: 0.2rem 0 0.2rem 0;
        }
      }

      .mall_payment-top-left-icon {
        flex: 1;
        text-align: right;
      }

      .van-icon-arrow::before {
        position: relative;
        top: 0.5rem;
        font-size: 0.4rem;
      }

      .mall_payment-top-left div+div {
        color: #989898;
        margin: 0.2rem 0 0.2rem 0;
      }

      .mall_payment-top-left div>span {
        color: #ecb047;
        font-size: 24rpx;
      }
    }

    .order-title {
      font-size: 24rpx;
      color: #272727;
      padding: 20rpx 0;
      margin: 0 20rpx;
      border-bottom: 1rpx solid #f2f2f2;
    }

    // 订单详细信息
    .mall_payment-commodity {
      padding: 32rpx 24rpx 86rpx;
      position: relative;
      align-items: flex-start;

      .mall_payment-commodity-img {
        width: 144rpx;
        height: 144rpx;
        margin-right: 20rpx;
        margin-bottom: 30rpx;
        background: #f5f5f5;

        img {
          width: 100%;
        }
      }

      .mall_payment-commodity-title {
        flex: 1;
        height: 144rpx;
        color: #000000;
        align-items: flex-start;
        position: relative;

        .mall-goods-price {
          position: absolute;
          bottom: 2rpx;
          color: #696969;
          font-size: 24rpx;
        }
      }

      .mall_payment-commodity-describe {
        line-height: 40rpx;
        height: fit-content;
        color: #000000;
        max-width: 410rpx;
      }

      .mall-right {
        color: #989898;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        max-width: 60rpx;

        .mall-right-icon {
          color: #bebebe;
          font-size: 34rpx;
          margin-left: 10rpx;
        }
      }

      .mall_payment-commodity-num {
        width: 30%;
        height: 100%;
        text-align: right;
        font-size: 0.3rem;
      }

      .mall_payment-commodity-num>p {
        color: #b4a1a1;
        margin-top: 12rpx;
      }

      .mall_payment-commodity-totalprice {
        width: 662rpx;
        height: 84rpx;
        justify-content: flex-end;
        position: absolute;
        bottom: 0;
        right: 0;
        font-size: 24rpx;
        color: #ff6666;
        border-top: 2rpx solid #eaeaea;
        margin: 0 24rpx;
      }

      .mall_payment-commodity-totalprice>span {
        color: #ff6666;
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    //  运费
    .mall_payment-freight {
      padding: 0 20rpx;
      height: 74rpx;
      margin: 20rpx 20rpx 0;
      font-size: 24rpx;
      color: #282828;
      border-radius: 10rpx;
      background: #ffffff;
    }

    // 购买按钮
    .vant-btn {
      width: 100%;
      margin: 0;
      position: absolute;
      bottom: 0;
      padding: 20rpx 40rpx;
      background: #ffffff;
      justify-content: space-between;
      border-top: 1rpx solid #f5f5f5;
      box-shadow: rgba(#000000, 0.05) 0rpx -24rpx 20rpx -12rpx;

      .van-btn-left {
        width: 500rpx;
        justify-content: flex-start;
        color: #000000;
      }

      .mall-price {
        font-size: 32rpx;
        font-weight: bold;
        color: #ff6666;
      }

      .van-button {
        position: static;
        width: 248rpx;
        font-size: 28rpx;
        height: 84rpx;
        line-height: 84rpx;
        border-radius: 42rpx;
        font-size: 32rpx;
      }
    }

    // 输入密码
    .mill-show {
      width: 90%;
      height: 200rpx;
      margin: auto;
      z-index: 999;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #ffffff;
    }

    .mill-show>input {
      width: 80%;
      height: 40rpx;
      margin: 20rpx;
      color: #040404;
    }

    .mill-show-zzc {
      width: 100%;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #000;
      opacity: 0.7;
      z-index: 888;
    }
  }
</style>

<style lang="less">
  .code_dialog {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);

    .code_dialog_box {
      flex-wrap: wrap;
      margin: 0 auto;
      width: 80%;
      height: 400rpx;
      background-color: #fff;
      box-shadow: 0 rgba(0, 0, 0, 0.5);
      border-radius: 10rpx;
    }
  }

  .mall_payment {
    .van-radio__label {
      color: #323233;
    }

    .vant-btn {
      .van-button::before {
        display: none;
      }
    }
  }
</style>
